<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="../../element/index.css" rel="stylesheet" />
		<script src="../../js/vue.js"></script>
		<script src="../../element/index.js"></script>
		<script src="../../js/axios.js"></script>
		<script src="../../js/gsaucommon.js"></script>
		<style>
			#app {
				width: 1200px;
				margin: 0px auto;
				padding: 0px;
				box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
			}

			.el-input {
				border: 1px solid #00FFFF;
				border-radius: 10px;
				width: auto;
				text-align: center;
				/* white-space: nowrap; */
				overflow: hidden;
				/* text-overflow: ellipsis; */
			}

			.el-form label {
				
				margin-left: 60px;
				text-align: center;
				/* display: inline-block; */
				font-size: 20px;
				/* width: 280px; */
				color: #000000;
			}
			
			
			element.style{
				width: 130px !important;
			}
			.el-form .el-row{
				border-bottom: 1px solid gainsboro;
				background-color: #FFFFFF;
				color: #000000;
			}
			
			.el-form .el-row .el-col{
				height: 100%;
			}
			
			.el-form-item__content{
				line-height: 10px;
				height: 100%;
			}

			.el-form-item {
				padding-top: 20px;
				/* height: 100% !important; */
			}
			.el-input__inner {
				border: none;
				text-align: left;
				font-size: 15px;
				color: #000000;
			}

			.d2 li {
				list-style: none;
			}

			.lyric-enter,
			.lyric-leave-to {
				opacity: 0;
				transform: translateY(10px);
			}

			.lyric-enter-to,
			.lyric-leave {
				opacity: 1;

			}

			/* .lyric-enter-active,
			.lyric-leave-active {
				transition: all 0.7s;
			} */
		</style>
	</head>
	<body>
		<div id="app">
			<div id="" style=" position: sticky; z-index: 2; top: 0px; background-color: white; height: 100px;">
				<el-row  style="margin-top: 20px;">
					<el-col :span="6" style="padding-left: 80px;">
						<h3>获奖情况详情</h3>
					</el-col>
					<el-col :span="14" style="margin-top: 20px;">
						<el-steps :active="active" finish-status="success">
						  <el-step title="填报数据"></el-step>
						  <el-step title="进行中"></el-step>
						  <el-step title="流转完成"></el-step>
						</el-steps>
					</el-col>
					<el-col :span="4" style="text-align: right; padding-top: 15px; padding-right: 80px; ">
						<el-button type="primary" @click="fanhui()">
							返回
						</el-button>
					</el-col>
				</el-row>
				<hr  />
			</div>

			<el-form ref="form" label-width="130px">
				<el-row >
					<el-row>
						<el-col :span="24">
							<el-form-item label="项目名称:">
								<el-input v-model="shuju.xiangmuName" readonly ></el-input>
							</el-form-item>
							<!-- 跟具自己的修改 可修改为 项目名称 书名 荣誉称号 竞赛名称 专利或软件著作权名称-->
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<el-form-item label="填写人姓名:">
								<el-input v-model="shuju.tianbaoName" readonly></el-input>
							</el-form-item>
						</el-col>
					</el-row>

					<el-row>
						<el-col :span="12">
							<el-form-item label="奖项名称:">
								<el-input v-model="shuju.huojiangName" readonly></el-input>
								<!-- 跟具自己的修改可修改为 奖项名称 出版社 组织单位 主持人 专利/软著号  -->
								<!-- 荣誉称号的可以删除此item -->
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<el-form-item label="得分:">
								<el-input v-model="shuju.deFen" readonly></el-input>
								<!-- 教材与专著，教改，科研项目，专利软著的删除此item -->
							</el-form-item>
						</el-col>
					</el-row>

					<el-row>
						<el-col :span="12">
							<el-form-item label="获奖级别:">
								<el-input v-model="shuju.huojiangJibie" readonly></el-input>
								<!-- 仅 发表论文、指导竞赛、获奖情况的（修改为“奖项级别”）保留-->
							</el-form-item>
						</el-col>

						<el-col :span="12">
							<el-form-item label="获奖等级:">
								<el-input v-model="shuju.huojiangDengji" readonly></el-input>
								<!-- 仅获奖情况的保留 -->
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="12">
							<el-form-item label="总人数:">
								<el-input v-model="shuju.zongRenShu" readonly></el-input>
								<!-- 仅获奖情况的保留 -->
							</el-form-item>
						</el-col>

						<el-col :span="12">
							<el-form-item label="本人排名:">
								<el-input v-model="shuju.meSort" readonly></el-input>
								<!-- 仅获奖情况的保留 -->
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<el-form-item label="提交人:">
								<el-input v-model="shuju.createBy" readonly></el-input>
								<!-- 仅获奖情况的保留 -->
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="12">
							<el-form-item label="提交时间:">
								<el-input v-model="shuju.createTime" readonly></el-input>
								<!-- 仅获奖情况的保留 -->
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="更新时间:">
								<el-input v-model="shuju.updateTime" readonly></el-input>
								<!-- 仅获奖情况的保留 -->
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="12">
							<el-form-item label="审批负责人:">
								<el-input v-model="shuju.manager" readonly></el-input>
								<!-- 仅获奖情况的保留 -->
							</el-form-item>
						</el-col>
						
						<el-col :span="12">
							<el-form-item label="当前状态:">
								<el-input v-model="shuju.status" readonly></el-input>
								<!-- 仅获奖情况的保留 -->
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<el-form-item label="认证材料:">
								<el-input type="button" v-model="pleaseClick" @click.native="showcont2"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-collapse-transition>
								<div v-show="show2" class="d2">
									<ul style="text-align: center;">
										<li v-for="(item,index) in fileList" :key="item.id" style="padding-left: 80px; text-align: left;"><i class="el-icon-document"></i>
										<el-link :href=item.url>{{item.name}}</el-link> </li>
									</ul>
								</div>
							</el-collapse-transition>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<el-form-item label="审批流程:">
								<el-input type="button" v-model="pleaseClick" @click.native="showcont1"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-collapse-transition>
								<div class="block" v-show="show" style="padding-left: 80px;">
									<el-timeline >
										<el-timeline-item v-for="(item,index) in liuchengData" :key="item.id">
											<el-card>
												<p>提交人： {{item.tijiaoName}}</p>
												<p>提交时间： {{item.tijiaoTime}}</p>
												<p>审核人： {{item.shenHeName}}</p>
												<p>审核时间： {{item.shenHeTime}}</p>
												<p>审核意见： {{item.shenHeResult}}</p>
											</el-card>
										</el-timeline-item>
									</el-timeline>
								</div>
							</el-collapse-transition>
						</el-col>
					</el-row>
				</el-row>
			</el-form>
		</div>	
	</body>
</html>
<script>
	let vm = new Vue({
		el: "#app",
		data: {
			id:"",
			shuju:[],
			show: false,
			show2: false,
			textarea: "需要补充材料",
			value: "",
			value2: false,
			active:1,
			path:"",
			cailiao: [],
			fileList:[],
			liuchengData:"",
			pleaseClick: "点击显示",
		},
		methods: {
			showcont1: function() {
				this.show = !this.show;
			},
			
			showcont2: function() {
				this.show2 = !this.show2;
				
			},
			
			submit:function(){
				console.log(this.textarea)
				console.log(this.value2)
			},
			
			findAll(){
				axios.get(window.gsau+"huojiang/selectone/"+this.id).then((rest)=>{
					//console.log(rest);
					this.shuju = rest.data.data
					this.shuju.status==="进行中"?this.active=1:this.active=3;
				})
				axios.get(window.gsau+"zhengmingcailiao/selectZhengMingCaiLiao/"+this.id).then((res)=>{
					console.log(res)
					console.log(res.data.data.length)
					this.cailiao=res.data.data
					for (let i = 0; i < res.data.data.length; i++) {
						let nameAndUrl={
							id:"",
							name:"",
							url:"",
							uid:"",
							status:""
						}
						nameAndUrl.name=res.data.data[i].fileName
						nameAndUrl.url=window.gsau+'files/liumaobing/'+res.data.data[i].fileFullPath.substr(res.data.data[i].fileFullPath.lastIndexOf("/")+1)
						nameAndUrl.id=res.data.data[i].id
						this.fileList.push(nameAndUrl)
						console.log(this.fileList)
					}
					
				})
			},
			findLiuCheng(){
				axios.get(window.gsau+"huojiang/selectliucheng/"+this.id).then((res)=>{
					console.log("///////////////////////")
					console.log(res)
					this.liuchengData=res.data.data;
					console.log(this.liuchengData)
				})
			},
			
			fanhui(){
				window.location="list.html"
			},
		},
		created(){
			this.id = localStorage.getItem("id")
			//console.log(this.id)
			this.findAll()
			this.findLiuCheng()
		}
	})
</script>
